A5創業項目春季招商 好項目招代理無憂

精致的首屏設計可以吸引用戶的注意力，延長他們在網站上的訪問時間，增加用戶對網站的好感。做好網頁的首屏設計至關重要。上回我們講到了首屏設計的概念、重要性以及涵蓋的布局元素，今天小飛就帶大家具體看一下在網站設計中究竟應該怎樣做好首屏設計，改善網站留給用戶的第一印象。

怎樣做好首屏設計?

在網站的首屏設計中，文本、圖片的排版或配色等確實很重要，但導航菜單的地位也不容撼動。良好的導航菜單有助于幫助用戶理解網站的基本框架和內容分類，下面有好幾條建議都是圍繞這一點展開的。每條建議還有相應的范例，希望大家能好好琢磨，學以致用。

注重可讀性和視覺層次

在首屏設計當中，要將網站內容或各種元素合理布局，在視覺上形成層次提高網站的可讀性，這樣用戶在獲取信息時會更加便捷，首屏設計也會更加用戶友好。要做到這一點，意味著我們需要仔細考量導航、Logo和標題等元素的字體，慎重選擇背景圖片、配色方案，讓網站在保持協調一致的同時錯落有致。Daily Bugle是一個做雜志的網站。在它的首屏中，居中的文字Logo相當于一個分界線，導航菜單項和搜索框均勻地分布在兩側，整個網站沿用了傳統報紙設計的襯線體，灰白色背景足夠典雅、大方，圖片、文字布局合理，在首屏設計上很是美觀。

而The Big Landscape 這個網站在整體布局上沒有遵循柵格系統，因此它的首屏設計也選用了非對稱的設計方法。頂欄的左邊是網站Logo和3個導航菜單項，右側是搜索框和一個醒目的CTA按鈕。主題部分是幾何形狀的圖片、明亮的標題、錯落的文本。整個網站重點突出又不失重點。

使用漢堡圖標

由于首屏的空間有限，漢堡圖標是近年興起的一種比較流行的解決方法。盡管現在關于漢堡圖標的使用還存在著一些爭議，但是它們仍然受到不少設計師的喜愛。漢堡圖標也逐漸成為首屏設計中一個經典的交互元素，用戶也更加熟悉漢堡圖標在網站中的角色。這種隱藏式的菜單可以讓整個頁面看上去更加簡約，給其他元素充分發揮的空間，在不同的設備上顯示時也會更加統一。

Ice這個網站就很好的展現了漢堡圖標的使用方法。由于網站的頁面很多，設計師很貼心的將漢堡圖標放在頁面的左上角，當用戶點擊時，它會彈出許多菜單選項。這樣的設計為網站節省了不少空間，整個網站看上去也更加簡潔。頁眉處的元素安排也比較合理，左側是品牌Logo和介紹，右側是社交媒體分享鏈接，實現了平衡。而背景圖片、行為按鈕、文本等的配合也很協調，在視覺上保持了一致。

Slopes在網站采用了漢堡圖標的另一種設計形式，那就是時下流行的側邊欄。不給設計師卻沒有將導航菜單顯示在側邊上，這可能也是因為頁面比較多吧!側邊欄上僅僅保留了品牌Logo，營造了一種非對稱的布局。頁眉處是四個導航菜單，而左側是漢堡圖標，這樣一來，交互的層次就出來了。帶有動效的背景圖片也更能抓住用戶的注意力。

懸浮固定頂欄

當用戶開始向下滾動翻頁的時候，首屏頂欄要如何處理也是一個我們需要關心的問題。有的網頁采取傳統的策略，選擇隱藏頂欄。而懸浮固定式的頂欄也是時下流行的一個趨勢。它為用戶提供了持續的可交互的導航服務，這對于許多一頁式長滾動網站來說非常有用。當然還有一種折中的方法，那就是當用戶向下滾動時，導航菜單縮小或變成菜單按鈕，降低視覺上的權重，保留網站核心元素。今天主要介紹固定頂欄的兩個栗子：

Structure Blog 的設計就采用了懸浮固定的頂欄，當訪客向下滾動時，頂欄一直出現。它的設計還遵循了極簡主義，品牌名稱居中，漢堡圖標隱藏菜單，放大鏡圖標代表搜索框，在保證功能的同時實現了布局的清爽。

photography Workshops網站的首屏在頁眉設計上要更有創意。最開始頂欄在翻頁時保持不變，不過當你向上滾動時，它會反過來出現在頁面的底部。頂欄上也呈現了網站的一些菜單選項，但更多的菜單項被隱藏在漢堡圖標之中。這有助于維持網站的一致性，在訪客與網站內容的互動中能發揮積極的作用。

雙層導航菜單

首屏中的導航菜單還可以設計為雙層的，已經有不少網站開始了這樣的嘗試。

Bakery 這個網站就是一個栗子，上層頁頭中呈現的是Logo和社交媒體帳號、搜索和購物車以及漢堡菜單，而第二層導航則是交互的核心區域：產品目錄、銷售地點、新聞和特別優惠等。整個設計視覺層次清晰，更有利于用戶體驗的提升。

首屏是網站重要的戰略位置。即使用戶可以滾動屏幕，首屏在人們心中還是占據很重要的地位的，不要小看首屏的作用。而關于怎樣做好首屏設計，上面的建議只是輔助性的，最重要的是做好用戶調查。每個網站的自身特點不同，目標受眾喜好多樣，滿足用戶需要、受到用戶歡迎的網站才有可能成功。根據調查結果決定你的首屏設計是應該遵循傳統還是銳意創新吧!快來起飛頁自助建站平臺做一個屬于自己的響應式網站吧!